<template>
  <!-- 消息 -->
  <div class="message">
    <div class="message-container-left">
      <el-col>
        <h4 style="margin-left: 15px">消息中心</h4>
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          router
        >
          <el-menu-item
            :index="item.path"
            v-for="item in aboutMyList"
            :key="item.path"
          >
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <router-view />
    </div>
  </div>
</template>

<script>
import {getIdols} from "@/api/commentApi"
export default {
  data() {
    return {
      attentionTotal: 0,
      defaultActive: "",
      aboutMyList: [
        {
          name: "回复我的",
          path: "/message/replyToMine",
        },
        {
          name: "@我的",
          path: "/message/aiteMine",
        },
        {
          name: "收到的赞",
          path: "/message/receivedPraise",
        },
        {
          name: "系统通知",
          path: "/message/systemNotification",
        },
        {
          name: "我的消息",
          path: "/message/myMessage",
        },
      ],
    };
  },
  methods: {
   
  },
  created() {
    this.defaultActive = this.$router.history.current.fullPath;
  },
  updated() {
    this.defaultActive = this.$router.history.current.fullPath;
  },
};
</script>

<style>
.message {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/navImgs/background04.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.8;
  position: absolute;
  margin:0px auto 0px auto;
}

.el-menu-vertical-demo {
  background-color: rgba(255, 255, 255, 0.5);
}

.message-container-left {
  height: 100%;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top:50%;
  left:20%;
  transform: translate(-50%,-50%);
}
</style>
